﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Gallery.Models.Album>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create Edit Ablum
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%
    int Id = 0; 
    string Name = "";
    string Description = "";
    string Avatar = "";
    if (Model != null)
    {
        Id = Model.Id;
        Name = Model.Name;
        Description = Model.Description;
        Avatar = Model.Avatar;
    }
    
     %>
<div id="wrapper">
  <div id="wrapper-top">
     <div style="width: 400px; padding-top: 110px; padding-left: 10px; float:left">
        <a href="/home/index"><label style="font-size: 18px; color: #0054D7;">Home</label></a>
        <label style="font-size: 22px;"> > </label>
        <a href="/home/index"><label style="font-size: 18px; color: #0054D7;">Album List</label></a>
        <label style="font-size: 22px;"> > </label>
         <%if(Name == ""){ %>
            <a href="#"><label style="font-size: 18px; color: Red;">Create Album</label></a>
        <%} else {%>
            <a href="#"><label style="font-size: 18px; color: Red;">Edit Album</label></a>
        <%} %>
    </div>
    <div style="float:left; margin-top: 10px;">   
       <img src="../images/logo.png" style="width: 130px; height: 130px;" alt="" />
        <img src="../images/logo1.png" style="width: 130px; height: 130px; " alt="" />
         <img src="../images/logo2.png" style="width: 130px; height: 130px; " alt="" />
     </div>
   
     <div style="padding-top: 20px; padding-left: 880px;"><input type="button" value="Log In" style="height: 30px; width: 90px;font-size:13px;"/></div>
  </div>
  <div id="left">
    <div class="logo"><a href="/home/index">Home</a></div>
    <ul class="menu">
      <li> <a class="opened" href="#">Album List</a>
        <ul class="sub-menu opened">
          <%foreach(var i in ViewBag.albums) %>
            <% {%> 
                 
                      <li><a href="/home/albumdetail?id=<%=i.Id %>"><%= i.Name %></a></li> 
                        
            <% } %>
        </ul>
      </li>
    </ul>
    <div id="left-bottom">
    </div>
  </div>
  <div id="right">
    <div style="margin-left: 20px;margin-top: 40px; margin-bottom: 30px;">
        <%if(Name == ""){ %>
            <label style="font-size: 25px;">Create Album</label>
        <%} else {%>
            <label style="font-size: 25px;">Edit Album</label>
        <%} %>
        <div style="margin-top: 40px; margin-left: 30px;">
            <form method="post" action="/home/createalbum" name="create" enctype="multipart/form-data">
                <input type="hidden" name="id" value="<%=Id %>" />
                <div>
                    <label style="font-size: 15px;">Album Name</label>
                    <input type="text" id="name" name="name" value="<%=Name %>" style="width: 300px; height: 20px; margin-left: 50px;" />
                </div>
                 <div style="margin-top: 20px;">
                    <label style="font-size: 15px;">Description</label>
                    <textarea name="description" style ="width: 300px; height: 60px;margin-left: 61px;"><%= Description %></textarea>
                </div>
                <div style="margin-top: 20px;">
                    <label style="font-size: 15px;">Avatar</label>
                    <input type="file" name="avatar" style="width: 300px; height: 20px; margin-left: 100px;" />
                </div>
                <%if(Avatar != "" && Name !=""){ %>
                    <div style="margin-top: 20px;">
                        <img src="../images/albums/avatars/<%=Avatar %>" style="margin-left: 200px; width: 130px; height: 130px; " alt="" />
                    </div>
                <%} %>
                <div style="display:none;" id="div">
                    <div align="center" style="font-size: 16px; padding-top: 8px; color: red; margin-top: 70px; width: 600px; height: 25px;background-color: #C19453;">
                        <strong id="error" >asd</strong>
                    </div>
                </div>
                <div style="margin-top: 40px; width: 500px; margin-left: 150px;">
                    <input type="button" id="save" value="Save" style="width: 70px; height: 25px;"/>
                     <a href="/home/index"><input type="button" value="Cancel" style="width: 70px; height: 25px;"/></a>
                </div>
            </form>
        </div>
    </div>
    <ul class="thumbnails">    
      
    </ul>
  </div>
   <div id="wrapper-bottom">
        <div style=" padding-top: 30px;">
          <a href="#wrapper" style="color: Red; font-size: 15px;">Back to Top</a>
        </div>
  </div>
</div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ScriptsSection" runat="server">
<script type="text/javascript">
    $("#save").click(function (){
        if (document.getElementById("name").value == "" || /^\s*$/.test(document.getElementById("name").value)) {
            var e = document.getElementById("error");
            e.innerHTML = "Album Name is required.";
            var d = document.getElementById("div");
            d.setAttribute("style", "display: block");
        }
        else {
            create.submit();
        }
    });

</script>
</asp:Content>
